<template>
  <!-- 最顶部开始 -->
        <div class="top">
            <div class="daohang">
                <!-- <ul>
                    <li>小米官网 <span>|</span> </li>
                    <li>小米商城 <span>|</span> </li>
                    <li>IoT <span>|</span> </li>
                    <li>MIUI <span>|</span></li>
                    <li>云服务 <span>|</span> </li>
                    <li>天星数科 <span>|</span> </li>
                    <li>有品 <span>|</span> </li>
                    <li>小爱开放平台 <span>|</span> </li>
                    <li>企业团购 <span>|</span> </li>
                    <li>资质证照 <span>|</span> </li>
                    <li>协议规则 <span>|</span> </li>
                    <li>下载app <span>|</span> </li>
                    <li>Select Location</li>

                </ul> -->

                <div class="zhu" v-if="user == null">

                    <a href="/login">登录</a><span>|</span>
                    <a href="/regist">注册</a><span>|</span>
                  <a href="/login">购物车</a>
                </div>

                 <div class="zhu" v-if="user != null">

                    <a href="/">首页</a><span>|</span>

                    <a href="javaScript:;">{{user.username}}, 欢迎访问</a><span>|</span>

                    <a href="javaScript:;" @click="logout()">退出</a><span>|</span>
                    
                    <a href="/order/list">我的订单</a>
                    <a href="/cart">购物车</a>
                </div>

                <h6 style="clear:both;"></h6>
            </div>
        </div>
        <!-- 最顶部结束 -->
</template>

<script>
import {logout} from '@/api/user.js'
export default {
  data () {
    return {
        user:null,
    }
  },

  created(){
    this.user = JSON.parse(localStorage.getItem("shop_user")) ;
  },

  components: {},

  methods: {
    logout(){
        //alert("aaaaaaaaaaaaaa")
        logout().then(resp=>{
            if(resp.code == 2000){
                localStorage.clear();
                this.$router.push("/login");
            }
        })
    }
  }
}
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.top{
    height: 40px;
    background-color: #333;
}
.top .daohang{
    width: 1226px;
    height: 40px;
    /* border: 1px red solid; */
    margin: auto
}

.top .daohang ul{
    float: left;
}

.top .daohang ul li{
    font-size: 12px;
    color: #bbb;
    display: inline-block;
    height: 40px;
    line-height: 40px;
}
.top .daohang ul li:hover{
    color: #fff;
    cursor: pointer;
}
.top .daohang  span{
    color: rgba(100, 100, 100, 0.3);
    margin: 0px 3px;
}

.top .daohang .zhu{
    float: right;
}

.top .daohang .zhu a{
    display: inline-block;
    text-decoration: none;
    height: 40px;
    line-height: 40px;

    font-size: 12px;
    color: #bbb;
    margin: 0px 10px;
}
.top .daohang .zhu a:hover{
    color: white;
}

.top .daohang .zhu a:last-of-type{
    padding: 0px 30px;
    box-sizing: border-box;
    text-indent: 15px;

    background:#555 url(@/assets/xiaomi/cart.png) no-repeat 20px center;
    background-size: 20px;
}

.top .daohang .zhu a:last-of-type:hover{
    background-color: #fff;
    color: orange;
    
}

</style>